<template>
  <div class="register-container">
    <h1>注册</h1>
    <p>可以进行管理员和用户的创建。</p>
    
    <div class="role-selector">
      <button 
        :class="{ active: role === 'user' }" 
        @click.prevent="role = 'user'">
        用户注册
      </button>
      <button 
        :class="{ active: role === 'admin' }" 
        @click.prevent="role = 'admin'">
        管理员注册
      </button>
    </div>

    <form @submit.prevent="register" class="register-form">
      <div class="form-group">
        <label for="username">用户名:</label>
        <input type="text" v-model="username" required />
      </div>
      <div class="form-group">
        <label for="password">密码:</label>
        <input type="password" v-model="password" required />
      </div>
      <button type="submit" class="register-button">注册</button>
      <p v-if="message" class="message">{{ message }}</p>
    </form>
  </div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios'; // 确保安装了 axios

export default {
  name: 'Register',
  setup() {
    const username = ref('');
    const password = ref('');
    const role = ref('user'); // 默认选择用户注册
    const message = ref('');

    const register = async () => {
      try {
        const endpoint = role.value === 'user' ? '/register/user' : '/register/admin';
        const response = await axios.post(`http://localhost:3000${endpoint}`, {
          username: username.value,
          password: password.value
        });
        message.value = response.data.message; // 显示注册成功消息
        // 清空输入
        username.value = '';
        password.value = '';
      } catch (error) {
        message.value = '注册失败，请重试'; // 显示错误消息
      }
    };

    return {
      username,
      password,
      role,
      message,
      register
    };
  }
};
</script>

<style scoped>
.register-container {
  height: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f0f2f5; /* 背景颜色 */
  background-color: white; /* 白色背景 */
  border-radius: 10px; /* 圆角 */
  padding: 20px; /* 内边距 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

h1 {
  color: #333;
}

.role-selector {
  display: flex; /* 使用 Flexbox 布局 */
  margin-bottom: 1rem; /* 底部间距 */
}

.role-selector button {
  width: 120px;
  flex: 1; /* 按钮均分宽度 */
  padding: 0.5rem; /* 内边距 */
  background-color: #73d0d0; /* 按钮背景颜色 */
  color: white; /* 按钮文字颜色 */
  border: none; /* 去掉边框 */
  border-radius: 4px; /* 圆角 */
  cursor: pointer; /* 鼠标指针样式 */
  transition: background-color 0.3s; /* 背景颜色过渡效果 */
  margin-right: 0.5rem; /* 按钮之间的间距 */
}

.role-selector button:last-child {
  margin-right: 0; /* 最后一个按钮不需要右边距 */
}

.role-selector button.active {
  background-color: #0056b3; /* 选中状态的背景颜色 */
}

.register-form {
  background-color: white; /* 表单背景颜色 */
  padding: 2rem; /* 内边距 */
  border-radius: 8px; /* 圆角 */
  /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 阴影效果 */
  width: 300px; /* 表单宽度 */
}

.form-group {
  margin-bottom: 1rem; /* 每个表单组的底部间距 */
}

label {
  display: block; /* 标签块级显示 */
  margin-bottom: 0.5rem; /* 标签底部间距 */
}

input {
  width: 100%; /* 输入框宽度 */
  padding: 0.5rem; /* 内边距 */
  border: 1px solid #ccc; /* 边框 */
  border-radius: 4px; /* 圆角 */
}

.register-button {
  width: 100%; /* 按钮宽度 */
  padding: 0.5rem; /* 内边距 */
  background-color: #007bff; /* 按钮背景颜色 */
  color: white; /* 按钮文字颜色 */
  border: none; /* 去掉边框 */
  border-radius: 4px; /* 圆角 */
  cursor: pointer; /* 鼠标指针样式 */
  transition: background-color 0.3s; /* 背景颜色过渡效果 */
}

.register-button:hover {
  background-color: #0056b3; /* 悬停时的背景颜色 */
}

.message {
  margin-top: 1rem; /* 消息顶部间距 */
  color: green; /* 成功消息颜色 */
}
</style>